<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    let arr = [{
        name: "詹詹",
        age: 12
    }, {
        name: "张三",
        age: 19
    }, {
        name: "李四",
        age: 18
    }, {
        name: "王五",
        age: 18
    }, ]; //假设这是一个数据库传来的数据
    let arr2;
    fn(arr); //传入arr数组和arr.name
    function fn(data) {
        arr2 = data.filter(function(ele, index, self) {
            if (ele.name == "张三") return ele; //利用filter过滤把想要的字段过滤出来成为新数组
        });
    }
    console.log(arr2);
    //利用过滤出来的新数组arr2遍历渲染数据
    let a = document.querySelector(".box");
    arr2.forEach((ele) => {
        str = `<h2>姓名：${ele.name}</h2>
      <p>年龄：${ele.age}</p>`;

        a.innerHTML += str;
    });
</script>

</html>